new Vue({
    el: '#app',
    data: {
        isEditing: false,
        folderName: '旧文件夹名称',
        newFolderName: '',
        user: {},
        likesCount: 0,
        readingCount: 0, // 新增属性，用来存储阅读总数
        updatedUser: {},
        userId: 1, // 假设这是我们要操作的用户ID
        activeIndex: '1',
        isActive: true,
        articles1: [],
        articles2:[],
        collections:[],
        folders:[],
        avatarUrl: 'https://p26-passport.byteacctimg.com/img/user-avatar/810a0394b7d37df390bd95345c2de230~60x60.awebp',
        userInfoUrl: '/user/61228381386487',
        activeComponent: 'AddArticle', // 默认显示文章组件
        stats: [
            { title: '文章被点赞', iconClass: 'zan', count: 0 }, // 初始点赞数设置为0
            { title: '文章被阅读', iconClass: 'stat-view-icon', count: 0 }, // 初始阅读数设置为0
        ]
    },

    methods: {
        fetchUserById() {
            axios.get(`user/getUserById.do?userId=${this.userId}`).then(response => {
                this.user = response.data;
            }).catch(error => {
                console.error("Error fetching user: ", error);
            });
        },
        fetchArticlesByUserId() {
            axios.get(`article/getArticlesByUserId.do?userId=${this.userId}`)
                .then(response => {
                    this.articles1 = response.data;
                })
                .catch(error => {
                    console.error("Error fetching articles: ", error);
                });
        },
        fetchLikesByUserId() {
            axios.get(`likes/selectLikedArticlesByUserId.do?userId=${this.userId}`).then(response => {
                this.articles2 = response.data;
                console.log(response.data)
            }).catch(error => {
            });
        },
        getAllFavoriteFolders() {
            axios.get('favorite-folders/getAllFavoriteFolders.do')
                .then(response => {
                    this.folders = response.data;
                    console.log(response.data); // 打印返回的数据
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        },


        fetchLikesCount() {
            axios.get(`likes/getTotalLikesByUserId.do?userId=${this.userId}`).then(response => {
                this.likesCount = response.data;
                this.stats[0].count = this.likesCount;
            }).catch(error => {
                console.error("Error fetching likes count: ", error);
            });
        },

        fetchReadingCount() {
            axios.get(`article/getTotalSeeByUserId.do?userId=${this.userId}`).then(response => {
                this.readingCount = response.data;
                this.stats[1].count = this.readingCount; // 更新阅读统计数据
            }).catch(error => {
                console.error("Error fetching reading count: ", error);
            });
        },
        redirectToSettings() {
            window.location.href = 'Personal Information.jsp'; // 替换为实际的JSP页面路径
        },
        showComponent(componentName) {
            this.activeComponent = componentName;
        },

    },

    toggleEdit() {
        this.isEditing = !this.isEditing;
        if (this.isEditing) {
            this.newFolderName = this.folderName; // 初始化输入框内容为当前文件夹名称
        }
    },
    saveChanges() {
        this.folderName = this.newFolderName;
        this.isEditing = false;
        // 在这里可以调用后端API更新文件夹名称
    },

    mounted() {
        this.fetchUserById();
        this.fetchLikesCount();
        this.fetchReadingCount(); // 在组件挂载后立即获取阅读总数
        this.fetchLikesByUserId();
        this.fetchArticlesByUserId();
        this.getAllFavoriteFolders();
    }
}).$mount('#app');